<template>
	<view class="pageIndex">
		<view :style="{'height': `${statusBarHeight}px`, 'background-color': '#060143'}"></view>
		<uni-nav-bar backgroundColor="#060143;" color="#FFF" :title="$t('language.cz')" @clickLeft="goBack"
			left-icon="left" :border="false" />
		<view class="logo">
			<image class="logo-ic" src="@/static/logo.png" alt="" />
			<view class="lang-wrap" @click="changeLanguage">
				<image src="../../static/100.png" mode=""></image>
				<text>{{$t('locale.lang')}}</text>
			</view>
		</view>
		<view class="noEntry">
			<!--酒店推荐-->
			<!-- v-if="HotelList.length > 0 && HotelList !== undefined" -->
			<view class="hotel">
				<view class="hotel-banner">
					<image :src="hotel_img" mode="aspectFill" />
				</view>
				<view class="list-box" v-for="(item, index) in HotelList" :key="index" @click="goHotelInfo(item.id)">
					<view class="hotel-title">
						{{ $t('language.name') == '中文' ? item.title_cn : item.title_en }}
					</view>
					<!-- <view class="hotel-intro" v-html="$t('language.name') == '中文' ? item.intro : item.e_intro"></view> -->
					<!-- <view class="address">
						<image class="ic" :src="`${baseUrl}/static/img/addrees.png`" alt="">
							{{ $t('language.name') == '中文' ? item.address_cn : item.address_en }}
					</view> -->
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		HTTP_REQUEST_URL
	} from '@/config/app';
	import uniIcons from "@/uni_modules/uni-icons/components/uni-icons/uni-icons.vue";
	import {
		info
	} from "@/api/user";
	let timer = null
	export default {
		name: 'hotel',
		components: {
			uniIcons
		},
		data() {
			return {
				baseUrl: HTTP_REQUEST_URL,
				statusBarHeight: 44,
				show: true,
				evenId: '',
				istype: '',
				user: '',
				HotelList: [],
				isSignAllreight: '', //是否已签到
				hotel_img: ''
			};
		},
		onLoad(o) {
			this.statusBarHeight = uni.getSystemInfoSync().statusBarHeight

			let istype = o.istype;
			let evenId = o.evenId;
			this.istype = istype;
			this.evenId = evenId;
			this.getInfo();
		},
		created() {},
		methods: {
			tapItem(url) {
				if (url != null) uni.navigateTo({
					url: '/pages/web/autoWeb?url=' + url
				})
			},
			goHotelInfo(id) {
				uni.navigateTo({
					url: '/pages/indexBox/hotelInfo?id=' + id + '&evenId=' + this.evenId
				})
			},
			getInfo() {
				info({
					event_id: this.evenId,
					key: this.value
				}).then(
					response => {
						if (response.code == 200) {
							const {hotel_img, hotel} = response.data
							if (hotel_img != '') {
								this.hotel_img = hotel_img
							}
							if (hotel !== undefined) {
								this.HotelList = hotel;
							}
							this.isSignAllreight = response.data.is_sign;
						} else {
							console.log(response);
						}
					},
					err => {
						console.log(err)
					}
				);
			},
			goBack() {
				uni.navigateBack()
			},
			changeLanguage() {
				if (this.$i18n.locale == 'zh') {
					this.$i18n.locale = 'en';
					uni.setStorageSync('locale', 'en')
				} else {
					this.$i18n.locale = 'zh';
					uni.setStorageSync('locale', 'zh')
				}
			}
		}
	};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss">
	.logo {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 20upx 30upx;
		background-color: #060143;

		.logo-ic {
			width: 78upx;
			height: 64upx;
		}

		.lang-wrap {
			display: flex;
			align-items: center;
			color: #fff;
			font-size: 24upx;

			image {
				width: 30upx;
				height: 30upx;
				margin-right: 12upx;
			}
		}
	}

	page {
		background-color: #050033;
	}

	.pageIndex {
		// width: 100%;
		// height: 100%;
		// min-height: 100vh;
		// background-color: #fff;
		position: relative;
	}

	.hotel {
		padding: 30upx;
	}

	.list-box {
		padding-bottom: 20upx;
	}

	.hotel-banner {
		width: 100%;
		height: 380upx;
		border-radius: 8upx;
		overflow: hidden;
		margin-bottom: 30upx;
	}

	.hotel-banner image {
		width: 100%;
		height: 100%;
		object-fit: cover;
	}

	.hotel-title {
		color: #fff;
		font-size: 30upx;
		padding: 24upx 38upx;
		padding-left: 60upx;
		border-radius: 8upx;
		box-sizing: border-box;
		background-color: #1f1b56;
		position: relative;
		
		&::after {
			content: '';
			position: absolute;
			top: 50%;
			left: 38upx;
			transform: translate3d(0,-50%,0);
			width: 8upx;
			height: 8upx;
			border-radius: 50%;
			background-color: #d3a86a;
		}
	}

	.hotel-intro {
		color: #fff;
		font-size: 24upx;
		margin-bottom: 20upx;
	}

	.address {
		font-size: 24upx;
		color: #666666;
	}

	.address .ic {
		display: inline-block;
		width: 24upx;
		height: 28upx;
		position: relative;
		top: 2upx;
	}
</style>